/**
* 功能描述：日期时间选择器
* @author jin xiaohang
*
* @date 2022/9/29 14:19
* @version 1.0
*/
<template>
    <div style="display: flex; flex-direction: row;justify-content: space-around;">
        <div class="yw-date-time-picker-date-panel">
            <div class="yw-date-time-picker-date-panel-input-wrap">
                <div class="yw-date-time-picker-date-panel-date-input-wrap">
                    <input class="yw-date-time-picker-date-panel-input" type="text" placeholder="请选择日期" />
                </div>
            </div>
            <div class="yw-date-time-picker-date-date-panel">
                <div class="yw-date-time-picker-date-date-panel-header">
                    <div class="yw-date-time-picker-date-date-panel-header-wrap">
                        <a class="yw-date-time-picker-date-prev-year-btn" role="button" ></a>
                        <a class="yw-date-time-picker-date-prev-month-btn" role="button"></a>
                        <span class="yw-date-time-picker-date-select">
                        <a class="yw-date-time-picker-date-year-select">2022年</a>
                        <a class="yw-date-time-picker-date-month-select">9月</a>
                    </span>
                        <a class="yw-date-time-picker-date-next-month-btn" role="button"></a>
                        <a class="yw-date-time-picker-date-next-year-btn" role="button"></a>
                    </div>
                </div>
                <div class="yw-date-time-picker-date-date-panel-body">
                    <table class="yw-date-time-picker-date-date-panel-table">
                        <thead>
                        <tr>
                            <th class="yw-date-time-picker-date-date-panel-table-header">
                                <span class="yw-date-time-picker-date-date-panel-table-header-inner">一</span>
                            </th>
                            <th class="yw-date-time-picker-date-date-panel-table-header">
                                <span class="yw-date-time-picker-date-date-panel-table-header-inner">二</span>
                            </th>
                            <th class="yw-date-time-picker-date-date-panel-table-header">
                                <span class="yw-date-time-picker-date-date-panel-table-header-inner">三</span>
                            </th>
                            <th class="yw-date-time-picker-date-date-panel-table-header">
                                <span class="yw-date-time-picker-date-date-panel-table-header-inner">四</span>
                            </th>
                            <th class="yw-date-time-picker-date-date-panel-table-header">
                                <span class="yw-date-time-picker-date-date-panel-table-header-inner">五</span>
                            </th>
                            <th class="yw-date-time-picker-date-date-panel-table-header">
                                <span class="yw-date-time-picker-date-date-panel-table-header-inner">六</span>
                            </th>
                            <th class="yw-date-time-picker-date-date-panel-table-header">
                                <span class="yw-date-time-picker-date-date-panel-table-header-inner">七</span>
                            </th>
                        </tr>
                        </thead>
                        <tbody class="yw-date-time-picker-date-table-body">
                        <tr>
                            <td class="yw-date-time-picker-date-table-cell yw-date-time-picker-date-table-last-month-cell">
                                <div class="yw-data-picker-table-data">26</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell yw-date-time-picker-date-table-last-month-cell">
                                <div class="yw-data-picker-table-data">27</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell yw-date-time-picker-date-table-last-month-cell">
                                <div class="yw-data-picker-table-data">28</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell yw-date-time-picker-date-table-last-month-cell">
                                <div class="yw-data-picker-table-data">29</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell yw-date-time-picker-date-table-last-month-cell">
                                <div class="yw-data-picker-table-data">30</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell yw-date-time-picker-date-table-last-month-cell">
                                <div class="yw-data-picker-table-data">31</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">1</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">2</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">3</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">4</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">5</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">6</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">7</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">8</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">9</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">10</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">11</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">12</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">13</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">14</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">15</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">16</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">17</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">18</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">19</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">20</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">21</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">22</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-date-time-picker-date-table-cell yw-date-time-picker-date-table-selected-cell">
                                <div class="yw-data-picker-table-data">23</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">24</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">25</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">26</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">27</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">28</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">29</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">30</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell">
                                <div class="yw-data-picker-table-data">31</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell yw-date-time-picker-date-table-next-month-cell">
                                <div class="yw-data-picker-table-data">1</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell yw-date-time-picker-date-table-next-month-cell">
                                <div class="yw-data-picker-table-data">2</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell yw-date-time-picker-date-table-next-month-cell">
                                <div class="yw-data-picker-table-data">3</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell yw-date-time-picker-date-table-next-month-cell">
                                <div class="yw-data-picker-table-data">4</div>
                            </td>
                            <td class="yw-date-time-picker-date-table-cell yw-date-time-picker-date-table-next-month-cell">
                                <div class="yw-data-picker-table-data">5</div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="yw-date-time-picker-date-date-panel-footer">
                    <span class="yw-date-time-picker-date-date-panel-footer-span">
                        <a class="yw-date-time-picker-date-date-panel-footer-today-button">此刻</a>
                        <a class="yw-date-time-picker-date-date-panel-footer-time-picker-button">选择时间</a>
                        <a class="yw-date-time-picker-date-date-panel-footer-ok-button">确定</a>
                    </span>
                </div>

            </div>
        </div>
        <div class="yw-date-time-picker-time-panel-part">
            <div class="yw-date-time-picker-time-input-wrap">
                <div class="yw-date-time-picker-time-date-input-wrap">
                    <input class="yw-time-range-input" type="text" placeholder="请选择开始时间" />
                </div>
            </div>
            <div style="outline: none ; border-right: 1px solid #f0f0f0;">
                <div class="yw-date-time-picker-time-panel-header">
                    <div style="position: relative">
                            <span class="yw-date-time-picker-time-panel-header-title">
                                <a class="yw-date-time-picker-time-panel-header-title-year">2022年</a>
                                <a class="yw-date-time-picker-time-panel-header-title-year">9月</a>
                                <a class="yw-date-time-picker-time-panel-header-title-year">23日</a>
                            </span>
                    </div>
                </div>
                <div class="yw-date-time-picker-time-panel-body">
                    <div class="yw-date-time-picker-time-panel-select yw-date-time-picker-time-panel-select-active">
                        <ul>
                            <li class="yw-date-time-picker-time-panel-select-date">00</li>
                            <li>01</li>
                            <li>02</li>
                            <li>03</li>
                            <li>04</li>
                            <li>05</li>
                            <li>06</li>
                            <li>07</li>
                            <li>08</li>
                        </ul>
                    </div>
                    <div class="yw-date-time-picker-time-panel-select yw-date-time-picker-time-panel-select-active">
                        <ul>
                            <li>00</li>
                            <li>01</li>
                            <li>02</li>
                            <li>03</li>
                            <li>04</li>
                            <li>05</li>
                            <li>06</li>
                            <li>07</li>
                            <li>08</li>
                        </ul>
                    </div>
                    <div class="yw-date-time-picker-time-panel-select yw-date-time-picker-time-panel-select-active">
                        <ul>
                            <li>00</li>
                            <li>01</li>
                            <li>02</li>
                            <li>03</li>
                            <li>04</li>
                            <li>05</li>
                            <li>06</li>
                            <li>07</li>
                            <li>08</li>
                        </ul>
                    </div>
                </div>
                <div class="yw-date-time-picker-time-date-panel-footer">
                    <span class="yw-date-time-picker-time-date-panel-footer-span">
                        <a class="yw-date-time-picker-time-date-panel-footer-today-button">此刻</a>
                        <a class="yw-date-time-picker-time-date-panel-footer-time-picker-button">选择日期</a>
                        <a class="yw-date-time-picker-time-date-panel-footer-ok-button">确定</a>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "ywDateTimePicker"
}
</script>

<style scoped>

</style>